<template>
    <div class="home_contact_us_box outer_shadows">
        <div class="home_contact_us_address">
            <img src="/public/img/home/city.png" alt=""> 总站地址：广西省柳州市鱼峰区官塘
        </div>
        <div class="home_contact_us_content">
            <div class="home_contact_us_content_choose"
                 @mousemove="bubbling_display=true" @mouseout="bubbling_display=false">
                <span>电话</span>
                <Bubbling style="width: 220px"
                          v-show="bubbling_display">
                    <img src="/public/img/home/phone.png" alt="">
                    <p style="color: white">电话热线：5201314258</p>
                </Bubbling>
            </div>

            <div class="home_contact_us_content_choose" style="background: #ec6d50"
                 @mousemove="tool=true" @mouseout="tool=false">
                <span>实用<br>工具</span>
                <Bubbling v-show="tool"
                          style="min-width: 150px">
                    <ul style="list-style: none">
                        <li v-for="(item,index) in toolList" :key="index" style="margin: 5px">
                            <a :href="item.url" target="_blank">{{ index + 1 + '、' + item.msg }}</a>
                        </li>
                    </ul>
                </Bubbling>
            </div>

            <div class="home_contact_us_content_choose" style="background: #6550ec"
                 @mousemove="email=true" @mouseout="email=false">
                <span>官方<br>邮箱</span>
                <Bubbling style="min-width: 200px"
                          v-show="email">
                    <img src="/public/img/home/email.png" alt="">
                    <p style="color: white">：905102975qq.com</p>
                </Bubbling>
            </div>

            <div class="home_contact_us_content_choose" style="background: #ecc850;cursor: pointer" @click="webhelp(2)"><span>意见<br>反馈</span></div>

            <div class="home_contact_us_content_choose" style="background: #50cc7b;cursor: pointer" @click="webhelp(null)">帮助</div>
        </div>
    </div>
</template>

<script setup>
import Bubbling from "@/components/publicComponent/Bubbling.vue";
import {ref} from "vue";

//实用工具列表数据
const toolList = ref([
    {url: "https://www.x-design.com/", msg: "logo设计"},
    {url: "https://boardmix.cn/", msg: "画图工具"},
    {url: "https://www.yuque.com/", msg: "语雀文档"},
])

//是否显示咨询
const bubbling_display = ref(false);

//是否显示邮箱
const email = ref(false);

// 是否显示工具
const tool = ref(false);

//跳转帮助页面的反馈内容
const webhelp = (index) => {
    let helpIndex = index;
    if(helpIndex){
        window.open("#/websiteHelp?choose="+helpIndex, '_blank');
    }else {
        window.open("#/websiteHelp", '_blank');
    }
    window.localStorage.setItem("Current_option", "-1");
}

</script>

<style scoped>
img {
    width: 30px;
}

.home_contact_us_box {
    position: sticky;
    top: 100px;
    width: 100%;
    padding: 10px;
    box-shadow: 0 0 2px rgba(96, 97, 98, 0.16);
}

.home_contact_us_address {
    display: flex;
    align-items: center;
    padding-bottom: 5px;
    font-size: 14px;
    border-bottom: 1px dotted #606162;
}

.home_contact_us_address img {
    margin-right: 3px;
}


.home_contact_us_content {
    display: grid;
    grid-template-columns: repeat(5, 50px);
    justify-items: center;
    align-items: center;
    justify-content: space-around;
    padding: 10px 0 0;
}

.home_contact_us_content div {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50px;
    border-radius: 50%;
    background: #6da6e1;
    font-size: 14px;
    cursor: default;
    transition: all .2s;
}

.home_contact_us_content div:hover {
    opacity: .8;
}

.home_contact_us_content_choose {
    color: white;
}

</style>